{% extends 'linkfacemock/base.html' %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}LinkFace mock {% endblock title %}</title>
</head>
{% block body %}
<body style="background: url({% static 'bootstrap/img/shanshui.JPG' %})" >

    <div style="margin-top: 60px;bottom: 30px;border-top:1px solid;border-bottom:1px solid "></div>
            <p class="tips text-danger"><marquee scrollamount="12">Tip:如有问题,请联系hemq</marquee></p>
        <div>
    <div class="col-lg-12" style="font-size: 24px;margin-top: 20px;color: #006dcc">Linkface Mock Channel</div>

    <div class="col-lg-12"><br><br><br><br></div>
    <div class="col-lg-12">
    <div id="search" class="col-lg-12">
        <form method="post" id="searchform" action="{% url 'linkfacemock:searchform' %}">
            <div class="form-inline">
                <label class="form-inline text-muted"><input id="searchfirst" type="text" class="form-control"
                                                             style="height: 30px;width: 190px;margin-top: 0px"/></label>
                <label class="form-inline text-muted" style="margin-left: 20px;">渠道类型：
                    <select name="##" id="channeltype" style="width: 200px;height: 30px">
                        <option value="人证">全部</option>
                        <option value="人证">人证</option>
                        <option value="银行卡二要素">银行卡二要素</option>
                        <option value="三要素">三要素</option>
                        <option value="四要素">四要素</option>
                    </select>
                </label>
                <label class="form-inline text-muted" style="margin-left: 20px;">开启状态：
                    <select name="##" id="openstatus" style="width: 200px;height: 30px">
                        <option value="人证">全部</option>
                        <option value="人证">开启</option>
                        <option value="银行卡二要素">关闭</option>
                    </select>
                </label>
                <label class="form-inline text-muted" style="margin-left: 20px"><input type="button" class="btn-primary"
                                                                                       value="查询"
                                                                                       onclick="searchform()"></label>
            </div>
        </form>
        <!--
       <input class="btn-primary" style="position: relative;top: -30px;right:-1110px" type="button" value="添加">
       -->
        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary" data-toggle="modal" data-target="#newInter"
                style="position: relative;top: -100px;right:-1130px;height: 35px;width: 70px">添加
        </button>
        <!-- 添加数据模态框（Modal）添加新接口 -->
        <div class="modal fade" id="newInter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">新增mock</h4>
                    </div>

                    <div class="modal-body">
                        <form method="post" id="updateform">

                            <div class="form-group">
                                <label for="txt_departmentname">接口后缀</label>
                                <input type="text" name="intername" class="form-control"
                                       id="txt_departmentname" placeholder="请输入接口名,如/mock">
                            </div>
                            <div class="form-group">
                                <label for="txt_departmentname">服务类型</label>
                                <input type="text" name="servicetype" class="form-control"
                                       id="txt_departmentname" placeholder="服务类型,如人证/X要素等">
                            </div>
                            <div class="form-group">
                                <label for="txt_departmentname">状态码</label>
                                <input type="text" name="httpcode" class="form-control"
                                       id="txt_departmentname" placeholder="请输入状态码,如/200">
                            </div>
                            <div class="form-group">
                                <label for="txt_departmentname">休眠时间</label>
                                <input type="text" name="sleeptime" class="form-control"
                                       id="txt_departmentname" placeholder="请输入休眠时间,如10">
                            </div>
                            <div class="form-group">
                                <label for="txt_departmentname">接口返回值</label>
                                <textarea class="form-control" rows="3" name="returninfo"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="txt_departmentname">请确定返回值格式(必选)</label>
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="optionsRadiosjson"
                                               value="json"
                                               checked> Json格式
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="optionsRadiosxml"
                                               value="xml">
                                        Xml格式
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="optionsRadiosstring"
                                               value="string1">
                                        String
                                    </label>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="test()">提交</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
    </div>

    <!-- 模态框（Modal）查看数据 -->
    <div class="modal fade" id="examineInter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header" style="background-color: #EAEAEA">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">查看mock数据</h4>
                </div>

                <div class="modal-body" style="background-color: #FFFFFF">

                    <div class="form-group">
                        <label for="txt_departmentname">接口名</label>
                        <p id="examtitle" style="margin-top:1px"></p>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="txt_departmentname" style="margin-top:1px">状态</label>
                        <p id="examstatus"></p>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="txt_departmentname" style="margin-top:1px">服务类型</label>
                        <p id="examservicetype"></p>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="txt_departmentname" style="margin-top:1px">休眠时间</label>
                        <p id="examsleeptime"></p>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="txt_departmentname" style="margin-top:1px">返回参数</label>
                        <p id="exambody"></p>
                    </div>

                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
        <!-- 模态框（Modal）编辑 -->
        <div class="modal fade" id="bianjiInter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">编辑mock</h4>
                    </div>

                    <div class="modal-body">
                        <form method="post" id="updateform">
                            <div class="form-group" style="margin-top: 0.2px">
                                <label for="txt_departmentname">接口后缀</label>
                                <p id="bianjiname" style="margin-left: 10px;margin-top: 5px"></p>
                            </div><hr style="margin-top: 0.1px">
                            <div class="form-group" style="margin-top: 0.2px">
                                <label for="txt_departmentname">服务类型</label>
                                <p id="bianjiservicetype" style="margin-left: 10px;margin-top: 5px"></p>
                            </div><hr style="margin-top: 0.1px">
                            <div class="form-group">
                                <label for="txt_departmentname">请输入新的返回值</label>
                                <textarea class="form-control" rows="8" name="bianjireturninfo"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="sumbitbianji()">提交</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>

            <!-- 模态框（Modal）删除确认弹窗 -->
        <div class="modal fade" id="deleteInter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">删除</h4>
                    </div>

                    <div class="modal-body">
                        <p>确认要删除?</p>
                        <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="sumbitbianji()">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
    <div class="col-lg-12">
        <table class="table table-striped" style="padding:0 25px">
            <thead>
            <tr>
                <th>ID</th>
                <th>接口名称</th>
                <th>渠道类型</th>
                <th>mock返回码</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for eachInter in allInfo %}
                <tr>
                    <td>{{ eachInter.inter_id }}</td>
                    <td>{{ eachInter.inter_name }}</td>
                    <td>{{ eachInter.service_type }}</td>
                    <td>{{ eachInter.http_code }}</td>
                    <td>
                        <div class="btn-toolbar" role="toolbar" aria-label="...">
                            <div class="btn-group" role="group" aria-label="..."
                                 onclick="openinter({{ eachInter.id }})">
                                开启
                            </div>
                            <div class="btn-group" role="group" aria-label="..."
                                 onclick="closeinter({{ eachInter.id }})">
                                关闭
                            </div>
                            <div class="btn-group" role="group" aria-label="..."
                                 onclick="examineInter({{ eachInter.id }})">
                                查看
                            </div>
                            <div class="btn-group" role="group" aria-label="..." onclick="bianjiInter({{ eachInter.id }})">
                                编辑
                            </div>
                            <div class="btn-group" role="group" aria-label="..." onclick="deleteinter({{ eachInter.id }})">
                                删除
                            </div>
                        </div>

                    </td>

                </tr>
            {% endfor %}
            </tbody>

        </table>
    </div>
    <script type="application/javascript">
        //新版本，使用ajax提交模态框内容，但目前toastr 还未生效
        function test() {
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:add' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'intername': $("input[name='intername']").val(),
                        'servicetype': $("input[name='servicetype']").val(),
                        'httpcode': $("input[name='httpcode']").val(),
                        'sleeptime': $("input[name='sleeptime']").val(),
                        'returninfo':$("textarea[name='returninfo']").val(),
                        'optionsRadiosinline': $("input[name='optionsRadiosinline']").val()
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.code == 200) {
                            //数据提交成功，关闭模态框
                            $('#newInter').modal('hide');
                            toastr.info('数据添加成功');
                            clear_toastr(2500);
                        }
                        else if (data.code == 201){
                            toastr.error('提交失败，请检查');
                        }
                    },
                    error: function (data) {
                        alert('这个data没有了')
                    }
                }
            );
        }

        // 动态设置消息提示时间
        function clear_toastr(time) {
            setTimeout(
                function () {
                    toastr.clear();
                }, time);
        }

        //老版本，使用表单提交模态框内地数据
        function add_newinterinfo() {
            var form = document.getElementById('updateform');
            //alert(form);
            form.submit();
            console.log('formresult' + form.submit());
            toastr.success('添加成功');
            $("#newInter").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            });
        }

        function searchform() {
            var searchform = document.getElementById('searchform');
            var searchfirst = document.getElementById('searchfirst').value;
            var channeltype = $('#channeltype option:selected').text();
            var openstatus = $('#openstatus option:selected').text();
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:searchform' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'searchcontent': searchfirst, 'channeltype': channeltype, 'openstatus': openstatus},
                    success: function (data) {
                        console.log(data)
                    },
                    error: function (data) {
                        alert('data不存在')
                    }
                }
            )
            //searchform.submit();

        }

        function updateNewInterInfo() {
            //获取到server端数据，填充进模态框，show模态框
        }

        function coazuo(info) {
            alert(info)
        }

        function openinter(interid) {
            //Django认证
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:ajaxopen' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': interid},
                    success: function (data) {
                        //如果不存在该版本，删除tbody.iou，给出提示
                        if (data.status == '0') {
                            alert('已开启')
                        } else if (data.status == '1') {
                            alert('系统异常,关闭失败,请联系hemq')
                        } else if (data.status == '2') {
                            alert('别点了，就是开的')
                        }
                    },
                    error: function (data) {
                        alert('data不存在')
                    }
                }
            )
        }

        //关闭接口
        function closeinter(interid) {
            //关闭开关
            //Django认证
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:ajaxclose' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': interid},
                    success: function (data) {
                        if (data.status == '0') {
                            alert('开关已关闭')
                        } else if (data.status == '1') {
                            alert('系统异常,关闭失败,请联系hemq')
                        } else if (data.status == '2') {
                            alert('别点了,就是关的')
                        }
                    },
                    error: function (data) {
                        alert('系统异常')
                    }
                }
            )
        }

        //删除该接口
        function deleteinter(interid) {
            //Django认证
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:deleteInfo' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': interid},
                    success: function (data) {
                        //如果不存在该版本，删除tbody.iou，给出提示
                        if (data.code == 200) {
                            toastr.success('删除成功!');
                            clear_toastr(5000);
                             window.location.reload();
                        } else {
                            toastr.error('操作失败，请检查');
                            clear_toastr(2500);
                        }
                    },
                    error: function (data) {
                        alert('data不存在')
                    }
                }
            );

        }

        //查看该接口信息
        function examineInter(interid) {
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:examineInter' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': interid},
                    success: function (data) {
                        console.log(data);
                        $('#examtitle').empty();
                        $('#examtitle').append(data.title);
                        $('#exambody').empty();
                        $('#exambody').append(data.returninfo);
                        $('#examservicetype').empty();
                        $('#examservicetype').append(data.servicetype);
                        $('#examsleeptime').empty();
                        $('#examsleeptime').append(data.sleeptime + 's');
                        if (data.status == '1') {
                            $('#examstatus').empty();
                            $('#examstatus').append('开启');
                        } else {
                            $('#examstatus').empty();
                            $('#examstatus').append('关闭');
                        }
                    },
                    error: function (data) {
                        alert('data不存在')
                    }
                }
            );
            $('#examineInter').modal('show');
        }
        //编辑 查看|编辑|提交
        function bianjiInter(interid) {
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                    url: "{% url 'linkfacemock:examineInter' %}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'id': interid},
                    success: function (data) {
                        console.log(data);
                        $('#bianjiname').empty();
                        $('#bianjiname').append(data.title);
                        $('#bianjiformat').empty();
                        $('#bianjiformat').append(data.format);
                        $('#bianjiservicetype').empty();
                        $('#bianjiservicetype').append(data.servicetype);
                        $('#bianjistatus').empty();
                        $('#bianjistatus').append(data.code );
                        $('#bianjisleeptime').empty();
                        $('#bianjisleeptime').append(data.sleeptime + 's');
                        if (data.status == '1') {
                            $('#examstatus').empty();
                            $('#examstatus').append('开启');
                        } else {
                            $('#examstatus').empty();
                            $('#examstatus').append('关闭');
                        }
                    },
                    error: function (data) {
                        alert('data不存在')
                    }
                }
            );
            $('#bianjiInter').modal('show');
        }

        function sumbitbianji() {
           newreturninfo = $("textarea[name='bianjireturninfo']").val();
           intername = $("#bianjiname").text();
           console.log({'function':'sumbitbianji()','newreturninfo':newreturninfo,'intername':intername});
           $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            // 发起 request
            $.ajax({
                    url: "{% url 'linkfacemock:compile'%}",
                    type: 'POST',
                    dataType: 'json',
                    data: {'intername': intername,'newreturninfo':newreturninfo},
                    success: function (data) {
                        console.log(data);
                        if (data.code == 200) {
                            //提示更改成功
                            $('#bianjiInter').modal('hide');
                            toastr.info('更改成功');
                            clear_toastr(2500)
                        }else if (data.code == 201){
                            //更新失败
                            $('#bianjiInter').modal('hide');
                            toastr.error('更新失败，请检查！');
                            clear_toastr(2500)
                        }

                    },
                    error: function (data) {
                        alert('data不存在')
                    }
                }
            );
        }
    </script>
{% endblock body %}
</body>
</html>